<template>
	<div>
		<el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
			<h3 class="login_title">系统登录</h3>

			<el-form-item label="用户名" prop="userName">
				<el-input v-model="form.userName" placeholder="请输入账号"></el-input>
			</el-form-item>

			<el-form-item label="密码" prop="password">
				<el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button @click="submit('form')" class="login_button" type="primary"> 登 录 </el-button>
			</el-form-item>

		</el-form>
	</div>
</template>

<script>
	import {
		get,
		post
	} from "../../plugins/axios.js"

	export default {
		name: "AppLogin",
		data() {
			return {
				form: {
					userName: '',
					password: '',
				},
				rules: {
					userName: [{
						required: true,
						trigger: 'blur',
						message: '长度在6到16个字符',
						min: 6,
						max: 16,
					}],
					password: [{
						required: true,
						trigger: 'blur',
						message: '长度在6到16个字符',
						min: 6,
						max: 16,

					}],
				}
			}
		},
		methods: {
			submit(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						let data = {
							user_name: this.form.userName,
							password: this.form.password
						};
						post("/user/login", data).then(
							res => {
								if (res.data.data === null) {
									//
									this.$message({
									    message: res.data.message,
									    type: 'error'
									});
								} else {
									localStorage.setItem("token", res.data.data)
									let token = localStorage.getItem("token")
									this.$router.push("/");
								}
							}
						)
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.login-container {
		width: 400px;
		border: 1px solid #eaeaea;
		margin: 180px auto;
		padding: 35px 35px 15px 35px;
		border-radius: 15px;
		box-shadow: 0 0 25px #cac6c6;
		background-color: #ffffff;
		box-sizing: border-box;

		.login_title {
			text-align: center;
			margin-bottom: 40px;
			color: #505458;
		}

		.el-input {
			width: 198px;
		}

		.login_button {
			margin-left: 105px;
			margin-top: 10px;
		}

		.login_register {
			width: 70px;
			height: 40px;
			text-align: center;
			margin-top: 10px;
		}
	}
</style>